<template>
  <el-dialog
      :close-on-click-modal="false"
      :visible="isShowAddNumDialog"
      :title="title"
      @close="$emit('close')"
      width="800px"
    >
    <el-table
        ref="table"
        :data="dataList"
        size="small"
        style="width: 100%"
      >
        <el-table-column prop="name" label="名称" align="center" />
        <el-table-column prop="category" label="类型" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.category == 1">玻璃器皿</span>
            <span v-else-if="scope.row.category == 2">实验耗材</span>
            <span v-else-if="scope.row.category == 3">采样工具</span>
            <span v-else-if="scope.row.category == 4">仪器设备</span>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="数量" align="center" />
        <el-table-column prop="unit" label="单位" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.unit == 1">个</span>
            <span v-else-if="scope.row.unit == 2">台</span>
            <span v-else-if="scope.row.unit == 3">套</span>
          </template>
        </el-table-column>
        <el-table-column prop="storage" label="仓库" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.storage == 1">器材室</span>
            <span v-else-if="scope.row.storage == 2">备品室</span>
            <span v-else-if="scope.row.storage == 3">外业仓库</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="入库时间" align="center" width="135"/>
        <el-table-column prop="residue" label="剩余量" align="center" />
        <el-table-column
          prop="actual"
          label="实际量"
          width="80px"
          align="center"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.actual"/>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="page.page+1"
        :page-size="page.size"
        layout="total, prev, pager, next"
        :total="totalElements">
      </el-pagination>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="$emit('close')">取消</el-button>
        <el-button
          type="primary"
          @click="panpingClick"
          >确认</el-button
        >
      </div>
    </el-dialog>
</template>

<script>
import {pankuAPI,getListAPI} from "@/api/hazardousChemicals";
import pagination from "@crud/Pagination";

export default {
  components: {
    pagination,
  },
  props:{
    isShowAddNumDialog:{
      type:Boolean,
      default:false
    },
    type:{
      type:Number
    },
    name:{
      type:String
    }
  },
  data () {
    return {
      title: '操作',
      page:{
        size:8,
        page:0
      },
      baseUrl: process.env.VUE_APP_BASE_API,
      srcList: [], //预览图片列表
      dataList:[],
      totalElements:null,
    }
  },
  created(){
    this.getList()
  },
  methods: {
    panpingClick(){
      pankuAPI(this.dataList).then((res)=>{
        this.$message.success(res)
        this.$emit('close')
        this.$emit('refresh')
      })
    },
    getList(){
      getListAPI({name:this.name,type:this.type,page:this.page.page,size:this.page.size}).then((res)=>{
        this.totalElements = res.totalElements
        this.dataList = res.content.map((item)=>({
          ...item,
          actual: ''
        }))
      })
    },
    handleCurrentChange(page){
      this.page.page = page -1
      this.getList()
    },
  }
}
</script>

<style scoped>

</style>
